<template>
	<view>
		<view class="wrap-authen flex align-center">
			<block v-for="(item, index) in list" :key="index">
				<view class="authen-item flex align-center just-center">
					<image class="img" :src="item.image" />

					<view class="title f-28">
						{{ item.name }}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import { getLabels } from "@/API/technician.js";
	export default {
		props: {
			/**
			 * 显示情况
			 * 1:显示4个
			 * 2:显示3个
			 */
			showType: {
				type: Number,
				default: 0,
			},
			/**
			 * 显示数量
			 */
			showCount: {
				type: Number,
				default: 4,
			},
		},
		data() {
			return {
				list: [],
			};
		},
		mounted() {
			this.getData();
		},
		methods: {
			/**
			 * 网络请求
			 */
			getData() {
				getLabels(this.showType).then((res) => {
					this.list = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-authen {
		width: 100%;
		height: 76rpx;
		overflow: hidden;
		background-color: transparent;

		.authen-item {
			flex: 1;
			height: 100%;

			.img {
				width: 28rpx;
				height: 28rpx;
			}
			.title {
				margin-left: 8rpx;
				color: $theme-color;
			}
		}
	}
</style>
